<template>
  <div class="container">
    <div class="titles">
      <div class="top">
        <img src="../src/views/imgs/picture.jpg" alt="logio">
        <h1>JinPiKa</h1>
      </div>
      <div class="bottom">
        <p>全球最大的代码托管平台</p>
      </div>
    </div>
    <div class="texts">
      <div class="left">
         <a class="right">账户密码登录</a>


        <hr>

      </div>
      <div class="right">
        <a class="right">手机号码登录</a>

        <hr>

      </div>
    </div>
    <div class="input">
      <div class="top">
        <input type="text" v-model="username" placeholder="用户名:user">
      </div>
      <div class="bottom">
        <input type="password" v-model="password" placeholder="密码:user">
      </div>
    </div>
    <div class="change">
      <div class="left">
        <input type="checkbox" v-model="autoLogin" />自动登录
      </div>
      <div class="right">
        <a href="#" class="forget">忘记密码</a>
      </div>
    </div>
    <div class="last">
      <button @click="login">登录</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: '',
      autoLogin: true,
    };
  },
  methods: {
    login() {
      console.log(`用户名: ${this.username}, 密码: ${this.password}, 自动登录: ${this.autoLogin}`);
    },
  },
};
</script>
<style scoped>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.titles {
  display: flex;
  flex-direction: column;
  margin-top: 2vw;
  margin-bottom: 1vw;
}

.titles .top {
  height: 8vw;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.titles .top img {
  width: 8vw;
  height: 8vw;
}

.titles .top h1 {
  line-height: 8vw;
  text-align: center;
  font-weight: bold;
  font-size: 6vw;
}

.titles .bottom {
  display: flex;
  align-items: center;
  justify-content: center;
}

.titles .bottom p {
  font-size: 2vw;
  color: #666666;
}

.texts {
  width: 100%;
  height: 4vw;
  display: flex;
  align-items: center;
  justify-content: center;
}

.texts .left,
.texts .right {
  display: flex;
  align-items: center;
  justify-content: center;
}

.texts .left p {
  line-height: 4vw;
  text-align: center;
  font-size: 2vw;
  color: #0097FF;
}

.input {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.input .top,
.input .bottom {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1vw;
  margin-bottom: 2vw;
}

.input input {
  padding: 10px;
  font-size: 2vw;
}

.change {
  display: flex;
  align-items: center;
  justify-content: center;
}

.change .left {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  line-height: 3vw;
  text-align: center;
  font-size: 2vw;
}

.change .right {
  margin-left: 4vw;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.change .right p {
  line-height: 3vw;
  text-align: center;
  font-size: 2vw;
  color: #0097FF;
}

.last {
  margin: auto;
  width: 40vw;
  display: flex;
  justify-content: center;
  align-items: center;
}

.last button {
  width: 30vw;
  height: 5vw;
  line-height: 5vw;
  background: #0097EF;
  font-size: 3vw;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  border: none;
  cursor: pointer;
}

.last button:hover {
  background: #007BB5;
}

.forget {
  text-decoration-line: none;
  font-size: 23px;
  color: #0097FF;
}

a {
  text-decoration-line: none;
  font-size: 33px;
  color: #393535;
}

a:hover {
  color: #0097FF;
  text-decoration-line: underline;
}
</style>
